<template>
  <!-- 添加明细 -->
  <div>
    <TopFilter :list="topFilterList" :cols="4" :labelWidth="85" :rows="2" :collapse="false" @filterChange="handleSearch"></TopFilter>
    <FilterTable
      :columns="tableColum"
      columnsRef="partPartPurchasePurchaseOrderPartSelect"
      height="auto"
      :selectionType="mode"
      :fetchapi="fetchapi"
      :params="fetchParams"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.tableColum = columns)"
      :onRowSelectChange="handleTableRowSelect"
      :onEnterEvent="handleEnterEvent"
      :onSyncTableData="handleTableDataListChange"
    ></FilterTable>
    <div class="btnWrap">
      <el-button @click="handleCancle">取消</el-button>
      <el-button v-if="showConfirmBtn" type="primary" @click="handleConfirm">确定</el-button>
    </div>

    <!-- 替换件查看弹窗 -->
    <BaseDialog :visible.sync="replacePartVisible" title="查看替换件" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <replaceAndInventory :partInfo="visibleReplacePartInfo"></replaceAndInventory>
    </BaseDialog>
  </div>
</template>

<script>
import { queryPartListByOrderType } from '@/api/part/partPurchase/purchaseOrder';
import replaceAndInventory from '@/pages/part/report/replaceAndInventory';
import { notifyAction } from '@/utils';
export default {
  components: {
    replaceAndInventory
  },
  props: {
    fetchapi: {
      type: Function,
      default: queryPartListByOrderType
    },
    orderType: Number,
    mode: {
      type: String,
      default: 'multiple'
    },
    // 是否显示保存按钮(默认为是)
    showConfirmBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      topFilterList: this.createFilterList(),
      tableColum: this.createTableColumn(),
      // fetchapi: queryPartListByOrderType,
      fetchParams: { xhrAbort: true },
      selectedRowDatas: [],
      visibleReplacePartInfo: {}, // 查看替代件的配件信息
      replacePartVisible: false // 是否显示替代配件查看弹窗
    };
  },
  created() {
    // console.log(this.fetchapi);
    // this.initSearch();
  },
  methods: {
    // 同步table列表数据
    handleTableDataListChange(e) {
      e.forEach(element => {
        if (!element.packageLiaght) {
          element.packageLiaght = 1;
        }
      });
    },
    createFilterList() {
      return [
        // {
        //   type: 'INPUT',
        //   label: '主组号'
        // },
        {
          type: 'INPUT',
          label: '配件代码',
          fieldName: 'partNo',
          initialValue: '',
          rules: [
            // { required: true, message: '请输入配件代码', trigger: 'blur' }
            // { min: 2, message: '请输入至少两位配件代码', trigger: 'change' }
          ]
        },
        {
          type: 'INPUT',
          label: '配件名称',
          fieldName: 'partName'
        }
        // {
        //   type: 'INPUT',
        //   label: '主组号',
        //   fieldName: 'mainGroupNo'
        // }
        // {
        //   type: 'INPUT',
        //   label: '拼音码',
        //   fieldName: 'spellCode'
        // }
        // {
        //   type: 'CHECKBOX',
        //   label: '成套件',
        //   change: e => {}
        // },
        // {
        //   type: 'CHECKBOX',
        //   label: '显示零可用',
        //   change: e => {}
        // }
      ];
    },
    createTableColumn() {
      return [
        // {
        //   title: '操作',
        //   dataIndex: 'handle',
        //   render: params => {
        //     return (
        //       <el-button
        //         type="text"
        //         onClick={() => {
        //           this.handleCheckReplacePart(params.row);
        //         }}
        //       >
        //         查看替换件
        //       </el-button>
        //     );
        //   }
        // },
        {
          title: '配件代码',
          width: 150,
          dataIndex: 'partNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配件名称',
          dataIndex: 'partName',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '仓库',
          dataIndex: 'storageName',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '含税采购单价',
          dataIndex: 'planPrice',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        // {
        //   title: '订货数量',
        //   dataIndex: 'packageLiaght',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'number',
        //   defaultEditable: true,
        //   editType: 'number',
        //   editable: true,
        //   min: 0
        // },
        {
          title: '库存数量',
          dataIndex: 'stockQuantity',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '可用数量',
          dataIndex: 'useableQuantity',
          sorter: true,
          filter: true,
          filterType: 'number'
        }
        // {
        //   title: '在途数量',
        //   dataIndex: 'ztOrderQty',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'number'
        // },
        // {
        //   title: '未发货数量',
        //   dataIndex: 'wfhOrderQty',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'number'
        // },
        // {
        //   title: '采购锁',
        //   dataIndex: 'stockLockMark',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // },
        // {
        //   title: '仅辖区发货',
        //   dataIndex: 'shipMark',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // },
        // {
        //   title: 'R3仓库代码',
        //   dataIndex: 'mock9',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // },
        // {
        //   title: 'R3库存数量',
        //   dataIndex: 'mock10',
        //   filter: true,
        //   sorter: true,
        //   filterType: 'number'
        // }
        // {
        //   title: '操作',
        //   render: props => {
        //     return <el-button type="text">查看R3库存</el-button>;
        //   }
        // }
      ];
    },
    handleCheckBox(e) {
      console.log(e);
    },
    // 初始化查询
    initSearch() {
      this.fetchParams = Object.assign(this.fetchParams, {
        partTypeNo: this.orderType,
        xhrAbort: false
      });
    },
    // 点击搜索条件搜索或者重置
    handleSearch(e) {
      if (!!!e.partNo && !!!e.mainGroupNo) {
        notifyAction('请至少输入配件代码或主组号中的一项', 'warning');
        return;
      }
      this.fetchParams.xhrAbort = true;
      this.fetchParams = Object.assign(this.fetchParams, {
        xhrAbort: false,
        partTypeNo: this.orderType,
        ...e
      });
    },
    // 选择配件
    handleTableRowSelect(e) {
      this.selectedRowDatas = e;
      // console.log('选中的行数据', this.selectedRowDatas);
    },
    // 双击事件
    handleEnterEvent(e) {
      this.$emit('onConfirm', [e]);
    },
    // 点击确定按钮
    handleConfirm() {
      if (this.selectedRowDatas.length) {
        this.$emit('onConfirm', this.selectedRowDatas);
      } else {
        return notifyAction('请选中一条数据', 'warning');
      }
      // this.$emit('close');
    },
    // 关闭弹窗
    handleCancle() {
      this.$emit('close');
    },
    // 点击查看替代件
    handleCheckReplacePart(row) {
      console.log(row);
      this.visibleReplacePartInfo = row;
      this.replacePartVisible = true;
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
